<template>
  <!-- 歌手页专辑组件 -->
  <div class="container mtop-30 mleft-30">
    <div class="top br-8 clearfix"
         v-if="singDesc.user">
      <img :src="singDesc.user.avatarUrl"
           class="img-180 br-8 f-left">
      <div class="rights f-left mleft-20">
        <h2>{{ singDesc.user.nickname }}</h2>
        <span v-for=" (si,index) in singDesc.artist.alias"
              :key="index"
              class="mtop-10 si fs-14 ccc">{{ si }}</span>
        <div class="mtop-10">
          <button class="btn btn-white"><i class="iconfont icon-wenjian"></i>&nbsp;收藏</button>
          <button class="btn ml-12 btn-white"><i class="iconfont icon-yonghu"></i>&nbsp;个人主页</button>
        </div>
        <div class="jianjie fs-13 mtop-20 ccc"
             v-if="singDesc.artist">
          <span>单曲数:{{ singDesc.artist.musicSize }}</span>
          <span>专辑数:{{singDesc.artist.albumSize }}</span>
          <span>MV数:{{  singDesc.artist.mvSize }}</span>
          <span v-if="singDesc.preferShow"
                style="text-decoration: underline;">演出数:{{ singDesc.preferShow }}</span>
        </div>
      </div>
    </div>
    <div class="nav mtop-10">
      <Menu :menuList="['专辑', 'MV', '歌手详情', '相似歌手']"
            mode="mode"
            @menuClick=" handleClick"></Menu>
    </div>
    <!-- 专辑 -->
    <div class="Aublum"
         v-show="tabIndex===0">
      <TopFifty :list="topList"></TopFifty>
      <AlbumList v-for="(item, index) in albumList"
                 :key="index"
                 :list="item"></AlbumList>
    </div>
    <!-- 歌手mv -->
    <div class="MV"
         v-show="tabIndex===1"
         style="margin-left:-10px">
      <mvList :list="mvList"
              type="imgurl"></mvList>
    </div>
    <!-- 歌手详情 -->
    <div v-show="tabIndex === 2">
      <template>
        <div class="mtop-20"
             v-for="text in introduction"
             :key="text.ti">
          <h2 class="fsize-b fs-14">{{ text.ti }}</h2>
          <div class="my-pre fs-14"
               v-for="(t, index) in text.txt"
               :key="index">
            <p>{{ t }}</p>
          </div>
        </div>
      </template>
    </div>
    <!-- 相似歌手 -->
    <div v-show="tabIndex===3">
      <div class="Singer-img mtop-20">
        <ul>
          <li v-for="item in Singer"
              :key="item.id"
              class="mright-20"
              @click="toPath(item.id)">
            <img v-lazy="item.picUrl"
                 :key="item.picUrl">
            <p class="mbuttom-15 mtop-10 fs-14 ccc">{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import mvList from '@/components/mvList/mvList.vue'
import AlbumList from '@/pages/Albums/AlbumList.vue'
import TopFifty from '@/pages/Albums/topFiftyList.vue'
import Menu from '@/components/Menu'
import {
  getArtistDesc,
  getArtistTop,
  getArtistAlbum,
  getAlbumDetail,
  getArtistMv,
  getArtistSame,
  getIntro
} from '@/api/artist'
export default {
  data () {
    return {
      isLoading: false,
      singDesc: [],//歌手描述
      sId: '',//歌手id
      topList: [],//热门50首
      albumList: [],//专辑list
      tabIndex: 0, //tab页的索引值
      mvList: [],//歌手mv
      introduction: [], //歌手详细描述,
      Singer: [],//相似歌手
    }
  },
  components: { Menu, TopFifty, AlbumList, mvList },
  mounted () {
    this.sId = this.$route.query.id
    this.getArtistDesc(this.sId)
    this.getArtistTop(this.sId)
    this.getArtistAlbum(this.sId)
  },
  computed: {
    user () {
      if (this.singDesc.user) return singDesc.user
    }
  },
  methods: {
    // 获取歌手详情
    async getArtistDesc (id) {
      let res = await getArtistDesc(id)
      if (res.code !== 200) return
      this.singDesc = res.data
    },
    // 获取热门50首
    async getArtistTop (id) {
      let res = await getArtistTop(id)
      if (res.code !== 200) return
      this.topList = res.songs
    },
    // 获取专辑列表
    async getArtistAlbum (id) {
      let res = await getArtistAlbum(id)
      if (res.code !== 200) return
      this.albumList = []
      res.hotAlbums.forEach((item) => {
        this.getAlbumDetail(item.id)
      });
    },
    // 获取专辑内容
    async getAlbumDetail (id) {
      let res = await getAlbumDetail(id)
      if (res.code !== 200) return
      this.albumList.push(Object.freeze(res))
    },
    // 获取歌手mv
    async getArtistMv (id) {
      let res = await getArtistMv(id)
      if (res.code !== 200) return
      this.mvList = res.mvs
    },
    // 获取相似歌手
    async getArtistSame (id) {
      let res = await getArtistSame(id)
      if (res.code !== 200) return
      this.Singer = res.artists
    },
    // 获取歌手描述
    async getIntro (id) {
      let res = await getIntro(id)
      if (res.code !== 200) return
      res.introduction.forEach((item) => {
        item.txt = item.txt.split('\n')
      })
      if (res.briefDesc)
        res.introduction.unshift({
          ti: '个人简介',
          txt: [res.briefDesc]
        })
      this.introduction = Object.freeze(res.introduction)
      this.isLoading = false
    },
    // 去歌手详情
    toPath (id) {
      if (this.sId !== id) {
        this.sId = id
        this.tabIndex = 0
        this.$bus.$emit('tabIndex', this.tabIndex)
        /* 在相似歌手页切换歌手，重置前三个tab的数据，且重新获取相似歌手 */
        this.topList = []
        this.albumList = []
        this.introduction = []
        this.mvList = []
        this.getArtistDesc(this.sId)
        this.getArtistTop(this.sId)
        this.getArtistAlbum(this.sId)
        this.getIntro(this.sId)
      }
    },
    // 菜单栏点击回调
    handleClick (index) {
      this.tabIndex = index
      if (this.tabIndex === 0) {
        this.getArtistDesc(this.sId)
        this.getArtistTop(this.sId)
        this.getArtistAlbum(this.sId)
      }
      if (this.tabIndex === 1) {
        this.getArtistMv(this.sId)
      } else if (this.tabIndex === 3) {
        this.getArtistSame(this.sId)
      } else if (this.tabIndex === 2) {
        this.getIntro(this.sId)
      }
    }
  }
}
</script>

<style scoped lang="less">
.top {
  .si {
    display: inline-block;
    &::after {
      display: inline;
      margin: 2px;
      content: ";  ";
    }
    &:last-of-type::after {
      content: "";
    }
  }
  .jianjie {
    span {
      padding-right: 15px;
    }
  }
}
.nav {
  width: 100%;
  height: 60px;
  margin-left: -45px;
}
.Singer-img {
  width: 1280px;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      img {
        width: 220px;
        height: 220px;
        border-radius: 8px;
      }
    }
  }
}
.my-pre {
  text-indent: 2em;
  line-height: 2;
  width: 100%;
  p {
    color: #676767;
  }
}
</style>